<template>
  <div id="pubnote">
    <div class="container">
      <!-- 卡片视图区 -->
      <el-card>
        <h2>发布动态</h2>
        <el-form ref="form" :model="form" label-width="100px">
          <el-form-item label="笔记标题">
            <el-input v-model="form.name"></el-input>
          </el-form-item>
          <el-form-item label="笔记标签">
            <el-select v-model="form.region" placeholder="标签">
              <el-option label="早餐" value="早餐"></el-option>
              <el-option label="午餐" value="午餐"></el-option>
              <el-option label="晚餐" value="晚餐"></el-option>
              <el-option label="烹饪" value="烹饪"></el-option>
              <el-option label="甜品" value="甜品"></el-option>
              <el-option label="下午茶" value="下午茶"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="笔记心得">
            <el-input
              type="textarea"
              :autosize="{ minRows: 2, maxRows: 4}"
              v-model="textarea2"
              class="xin"
            ></el-input>
          </el-form-item>
          <el-form-item label="背后故事">
            <el-input
              type="textarea"
              :autosize="{ minRows: 8, maxRows: 12}"
              v-model="textarea1"
              class="shu"
            ></el-input>
          </el-form-item>
          <el-row>
            <el-col :span="1">
              <div class="grid-content bg-purple"></div>
            </el-col>
            <el-col :span="7">
              <div class="grid-content bg-purple">
                <div class="imgmin" @click="notetu1">
                  <img src alt class="imgminadd" ref="addnotetu1" />
                  <p class="imgmintu" ref="content1">+</p>
                </div>
                <input type="file" name="fileName" class="btn" ref="notebu1" @change="noteimg1" />
              </div>
            </el-col>
            <el-col :span="7">
              <div class="grid-content bg-purple-light">
                <div class="imgmin" @click="notetu2">
                  <img src alt class="imgminadd" ref="addnotetu2" />
                  <p class="imgmintu" ref="content2">+</p>
                </div>
                <input type="file" name="fileName1" class="btn" ref="notebu2" @change="noteimg2" />
              </div>
            </el-col>
            <el-col :span="7">
              <div class="grid-content bg-purple">
                <div class="imgmin" @click="notetu3">
                  <img src alt class="imgminadd" ref="addnotetu3" />
                  <p class="imgmintu" ref="content3">+</p>
                </div>
                <input type="file" name="fileName2" class="btn" ref="notebu3" @change="noteimg3" />
              </div>
            </el-col>
            <el-col :span="2">
              <div class="grid-content bg-purple"></div>
            </el-col>
          </el-row>
        </el-form>

        <br />
        <input type="checkbox" id="can" />是否参加活动
        <div class="xian"></div>
        <div class="tijiao">
          <!-- <button @click="submit" id="submit">发布</button> -->
          <el-button :plain="true" id="submit" @click="submit">发布</el-button>
          <input type="button" value="存草稿" id="draft" />
        </div>
      </el-card>
    </div>
  </div>
</template>
<style lang="css" scoped>
.container {
  margin-top: 110px;
  margin-bottom: 60px;
}
h2 {
  font-size: 20px;
  color: #e6a23c;
  font-weight: 700;
  line-height: 48px;
  margin-left: 40px;
  margin-top: 20px;
  margin-bottom: 20px;
}
.el-form {
  margin-left: 20px;
}
.el-input {
  width: 80%;
  margin-left: 15px;
}
.el-select {
  margin-left: 15px;
}
.xin {
  margin-left: 15px;
  width: 80%;
}
.shu {
  margin: 10px;
  margin-left: 15px;
  width: 80%;
}
.tijiao {
  margin: 30px;
}
#submit {
  width: 150px;
  height: 45px;
  border: 1px solid #e6a23c;
  background-color: #e6a23c;
  border-radius: 5px;
  font-size: 20px;
  color: white;
  margin-right: 40px;
}
#draft {
  width: 150px;
  height: 45px;
  border: 1px solid #e6a23c;
  background-color: white;
  border-radius: 5px;
  font-size: 20px;
  color: #e6a23c;
}
#can {
  margin-left: 55px;
  margin-top: 10px;
}
.xian {
  border: 0;
  width: 88%;
  border-top: 1px solid #ccc;
  margin-top: 20px;
  margin-bottom: 20px;
  margin-left: 30px;
}
#pic {
  margin-left: 136px;
  margin-top: 20px;
}
.imgmin {
  width: 80%;
  height: 200px;
  background-color: #fbfdff;
  border: 1px dashed #c0ccda;
  border-radius: 5px;
  margin: 0 auto;
}
.imgmin p {
  text-align: center;
  margin-top: 50px;
}
.imgmintu {
  font-size: 40px;
  color: #ccc;
}
.btn {
  display: none;
}
.imgminadd {
  width: 100%;
  height: 200px;
}
</style>
<script>
import "bootstrap/dist/css/bootstrap.min.css";
import "bootstrap/dist/js/bootstrap.min.js";
export default {
  data() {
    return {
      file: [],
      userId: 0,
      form: {
        name: "",
        region: ""
      },
      textarea1: "",
      textarea2: "",
      dialogImageUrl: "",
      dialogVisible: false,
      disabled: false
    };
  },
  methods: {
    uploadImg($event) {
      this.file.push($event.target.files[0]);
    },
    submit() {
      let formData = new FormData();
      formData.append("title", this.form.name);
      formData.append("select", this.form.region);
      formData.append("textarea1", this.textarea1);
      formData.append("textarea2", this.textarea2);
      formData.append("fileName", this.file[0]);
      formData.append("fileName1", this.file[1]);
      formData.append("fileName2", this.file[2]);
      formData.append("userId", this.userId);
      console.log("userId", this.userId);
      //  console.log("file",this.file[0])
      //  console.log("file1",this.file[1])
      this.$axios
        .post("/api/createNote/createNote", formData)
        .then(res => {
          if (res.data.data.length != 0) {
            this.$message({
              message: "发布笔记成功！",
              type: "success"
            });
            this.$router.push("/community");
          }
        })
        .catch(err => {
          console.log("errmessage", err);
        });
    },
    onSubmit() {
      console.log("submit!");
    },
    handleRemove(file) {
      console.log(file);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    handleDownload(file) {
      console.log(file);
    },
    notetu1() {
      this.$refs.notebu1.click();
    },
    notetu2() {
      this.$refs.notebu2.click();
    },
    notetu3() {
      this.$refs.notebu3.click();
    },
    noteimg1($event) {
      this.file.push($event.target.files[0]);
      var fileReader = new FileReader();
      var reg = /^image/gi;
      var _this = this;
      var flag = reg.test(this.$refs.notebu1.files[0].type);
      if (flag) {
        fileReader.onload = function(e) {
          _this.$refs.addnotetu1.src = e.target.result;
          _this.$refs.content1.innerHTML = "";
        };
        fileReader.readAsDataURL(this.$refs.notebu1.files[0]);
      } else {
        alert("图片上传失败！");
      }
    },
    noteimg2($event) {
      this.file.push($event.target.files[0]);
      var fileReader2 = new FileReader();
      var reg2 = /^image/gi;
      var _this = this;
      var flag2 = reg2.test(this.$refs.notebu2.files[0].type);
      if (flag2) {
        fileReader2.onload = function(e) {
          _this.$refs.addnotetu2.src = e.target.result;
          _this.$refs.content2.innerHTML = "";
        };
        fileReader2.readAsDataURL(this.$refs.notebu2.files[0]);
      } else {
        alert("图片上传失败！");
      }
    },
    noteimg3($event) {
      this.file.push($event.target.files[0]);
      var fileReader3 = new FileReader();
      var reg3 = /^image/gi;
      var _this = this;
      var flag3 = reg3.test(this.$refs.notebu3.files[0].type);
      if (flag3) {
        fileReader3.onload = function(e) {
          _this.$refs.addnotetu3.src = e.target.result;
          _this.$refs.content3.innerHTML = "";
        };
        fileReader3.readAsDataURL(this.$refs.notebu3.files[0]);
      } else {
        alert("图片上传失败！");
      }
    }
  },
  created() {
    this.$axios.defaults.headers.common["Authorization"] = localStorage.getItem(
      "MyToken"
    );
    this.$axios
      .get("/api/users/getUserInfo")
      .then(res => {
        console.log(res.data.data[0].userId);
        this.userId = res.data.data[0].userId;
      })
      .catch(err => {
        console.log(err);
      });
  }
};
</script>

